<template>
  <view class="userinfo">
    <!--头像 + 背景-->
    <view class="user-section">
      <view class="avatar">店铺logo</view>
      <!--#ifdef H5-->
      <!--h5直接上传头像-->
      <view class="portrait-box flex" @tap="uploadImage">
        <image class="portrait" :src="profileInfo.logo || headImg"></image>
        <view class="right-row"> </view>
      </view>
      <!-- #endif -->
      <!--#ifndef H5-->
      <!--非h5裁剪头像上传-->
      <view class="portrait-box">
        <avatar
          canRotate="false"
          selWidth="320upx"
          selHeight="320upx"
          @upload="handleUploadFile"
          :avatarSrc="profileInfo.logo || headImg"
          avatarStyle="width: 90upx; height: 90upx; border-radius: 100%; border: 6upx solid #fff;"
        >
        </avatar>
      </view>
      <!-- #endif -->
    </view>
    <view class="input-item">
      <view>
        <text class="tit">店铺名称</text>
      </view>
      <view class="flex" @tap="updateName">
        <text class="tit">{{ profileInfo.shop_name }} </text>
        <view class="right-row"> </view>
      </view>
    </view>
    <!--加载动画-->
    <rfLoading isFullScreen :active="loading"></rfLoading>

    <!--进度条加载-->
    <rf-load-progress
      :height="CustomBar"
      :progress="loadProgress"
    ></rf-load-progress>
    <uniModel
      :userFeedbackHidden="userFeedbackHidden"
      @confirm="FeedbackHidden"
      @cancle="cancle"
    ></uniModel>
  </view>
</template>

<script>
import uniModel from "@/pages/user/userinfo/uni-model.vue";
import { business, uploadImage } from "@/api/userInfo";
import avatar from "@/components/rf-avatar/rf-avatar";
import moment from "@/common/moment";
export default {
  components: { avatar, uniModel },
  data() {
    return {
      loadProgress: 0,
      CustomBar: this.CustomBar,
      profileInfo: {
        shop_name: "",
        logo: "",
      },
      userFeedbackHidden: true,
      loading: true,
      headImg: this.$mAssetsPath.headImg,
      btnLoading: false,
    };
  },
  onLoad() {
    this.initData();
  },
  methods: {
    FeedbackHidden(show, shop_name) {
      this.userFeedbackHidden = show;
      this.profileInfo.shop_name = shop_name;
      this.handleUpdateInfo();
    },
    cancle(show){
      this.userFeedbackHidden = show;
    },
    // 通用跳转
    navTo(route) {
      this.$mRouter.push({ route });
    },
    // 上传头像
    uploadImage() {
      // 从相册选择图片
      const _this = this;
      uni.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"],
        sourceType: ["album"],
        success: function (res) {
          _this.handleUploadFile(res.tempFilePaths);
        },
      });
    },
    // 上传头像
    handleUploadFile(data) {
      const _this = this;
      const filePath = data.path || data[0];
      _this.$http
        .upload(uploadImage, {
          filePath,
          name: "file",
        })
        .then((r) => {
          _this.profileInfo.logo = r.data;
          _this.handleUpdateInfo();
        });
    },
    // 数据初始化
    initData() {
      this.getbusiness();
    },
    // 获取用户信息
    async getbusiness() {
      await this.$http
        .get(business)
        .then((r) => {
          this.loading = false;
          this.profileInfo = r.data;
          this.profileInfo
        })
        .catch(() => {
          this.loading = false;
        });
    },
    updateName() {
      this.userFeedbackHidden = !this.userFeedbackHidden;
      this.handleUpdateInfo();
    },
    // 更新用户信息
    async handleUpdateInfo(nickName) {
      this.btnLoading = true;
      await this.$http
        .put(business, {
          shop_name: this.profileInfo.shop_name?this.profileInfo.shop_name:"游客登录",
          logo: this.profileInfo.logo?this.profileInfo.logo:"",
        })
        .then(() => {
          this.$mHelper.toast("店铺设置成功");
        })
        .catch(() => {
          this.btnLoading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background: #fff;
}

.userinfo {
  border-top: 1upx solid #eeeeee;
  background: #ffffff;
  .right-row {
    width: 18upx;
    height: 18upx;
    border-top: 2upx solid #999999;
    border-right: 2upx solid #999999;
    transform: rotate(45deg);
  }
  .weibangding {
    font-size: 28upx;
    color: #999;
    font-weight: 500;
  }
  .user-section {
    display: flex;
    border-bottom: 1upx solid #eeeeee;
    font-weight: 500;
    align-items: center;
    color: #333333;
    justify-content: space-between;
    height: 150upx;
    line-height: 150upx;
    margin: 0 0 0 30upx;
    padding-right: 30upx;
    font-size: 28upx;
    overflow: hidden;
    position: relative;
    .bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 90upx;
    }

    .portrait-box {
      clear: both;
      z-index: 2;
    }

    .portrait {
      position: relative;
      width: 90upx;
      height: 90upx;
      border-radius: 50%;
      border: 6upx solid #fff;
    }

    .yticon {
      position: absolute;
      line-height: 1;
      z-index: 5;
      font-size: 48upx;
      color: #fff;
      padding: 4upx 6upx;
      border-radius: 6upx;
      background: rgba(0, 0, 0, 0.4);
    }

    .pt-upload-btn {
      right: 0;
      bottom: 10upx;
    }

    .bg-upload-btn {
      right: 20upx;
      bottom: 16upx;
    }
  }
  .input-item {
    display: flex;
    border-bottom: 1upx solid #eeeeee;
    align-items: center;
    justify-content: space-between;
    margin: 0 30upx 0 30upx;
    height: 100upx;
    font-size: 28upx;
    font-weight: 500;
    line-height: 100upx;
    color: #333333;
    &:last-child {
      margin-bottom: 0;
    }
    .tit {
      padding-right: 10upx;
    }
  }
}
</style>
